<template>
  <div class="login-container">
    <div class="title">
      <span>欢迎登录</span>
    </div>
    <a-form class="form" :form="form" @submit="handleSubmit">
      <a-form-item :wrapper-col="{ span: 24 }">
        <a-input
          placeholder="账号"
          v-decorator="[
          'username',
          {rules: [{ required: true, message: '请输入你的账号!' }]}
        ]"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 24 }">
        <a-input
          type="password"
          placeholder="密码"
          v-decorator="[
          'password',
          {rules: [{ required: true, message: '请输入您的密码!' }]}
        ]"
        />
      </a-form-item>
      <a-form-item>
        <a-button class="submit" type="primary" html-type="submit">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data() {
    return {
      formLayout: 'horizontal',
      form: this.$form.createForm(this),
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    handleSelectChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
.login-container {
  border: 1px solid #eee;
  width: 350px;
  padding: 20px 25px;
  margin: 0 auto;

  .title {
    text-align center
    margin-bottom 20px
    font-size: 20px;
    bold: 500;
  }

  .submit {
    width: 100%;
  }
}
</style>
